<template>
  <div class="home-entrance">
    <div class="entrance-pic hover-style" v-for="img in entranceImgs" :key="img.id">
      <img :src="getImgUrl(img.img)" alt="">
    </div>
  </div>
</template>

<script>
export default {
  props: {
    entranceImgs: {
      type: Array,
      default: function () {
        return [
          {
            id: 1,
            img: 'index_entrance_01'
          },
          {
            id: 2,
            img: 'index_entrance_02'
          },
          {
            id: 3,
            img: 'index_entrance_03'
          },
          {
            id: 4,
            img: 'index_entrance_04'
          },
        ]
      }
    }
  },

  methods: {
    getImgUrl(img) {
      return require("@/assets/imgs/"+img+".png")
    }
  }
}
</script>

<style lang="stylus" scoped>
    .home-entrance
      width 1200px
      height 180px
      display flex
      margin 20px auto
      .entrance-pic
        max-width 288px
        width auto
        margin-right 16px
        border 1px solid rgba(#CCA566, 1)
        position relative
        &:last-child
          margin-right 0
        img 
          width 100%
      .entrance-pic::after
        content ''
        display block
        height 100%
        width 100%
        background-color rgba(0,0,0,0)
        transition .2s
        position absolute
        left 0
        top 0
        pointer-events none
      .entrance-pic:hover::after
        background-color rgba(0,0,0,0.4)
        transition .2s
</style>